<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery-3.5.1.min.js"></script>
  <script src="./axios.min.js"></script>
</head>
<body>
  <div class="container" id="container">
    <div class="row">
      <div class="row-left">
        <h3>当前任务
		<!-- <span id="changeuser">更换用户</span> -->
		</h3>
        <div class="event-container" id="event-container">
          
          </div>
      </div>
      <div class="row-right">
        <h3>排队中</h3>
        <table class="styled-table"  id="myTable">
          <thead>
            <tr>
              <th>任务号</th>
              <th>货位号</th>
              <th>托盘号</th>
            </tr>
          </thead>
          <tbody id="tableBody"></tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .container {width: 100%;height: 100vh;background: #002349;color: #fff;}
  .row {width: 100%;height: 100%;display: flex;flex-direction: row;}
  .row-left {width: 70%;height: 100%;border-right: 3px solid #1e5a9f;padding: 20px;box-sizing: border-box;display: flex;flex-direction: column;}
  .row-right{flex: 1;padding: 20px;box-sizing: border-box;}
  h3{
    margin-bottom: 10px;
  }
  .styled-table {
    max-height: calc(100vh - 40px); /* 设置最大高度 */
    overflow-y: auto; /* 当内容超出高度时显示滚动条 */
  }
  .styled-table.no-data {
    display: none; /* 隐藏表格 */
  }
  table {
  width: 100%;
  border-collapse: collapse;
}

thead tr {
  background-color: #f8f8f8;
  color:#000 ;
}

th, td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
  
}
th, td >div{
  width: 150px;
  overflow: hidden; /*表示超出表格单元格宽度部分的内容不显示*/
text-overflow: ellipsis; /*用省略号表示被隐藏的文本*/
white-space: nowrap; /*不换行*/
}
th {
  background-color: #f2f2f2;
}

.styled-table {
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
.event-container {
  flex: 1;
 padding: 20px;
 border: 1px solid #ccc;
 margin-bottom: 20px;
 }
 .event-header {
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 margin-bottom: 10px;
 }
 .event-info {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 font-size: 24px;
 }
 .event-info > div {
 margin-bottom: 20px;
 }
 .event-info > div:last-child {
 margin-bottom: 20px;
 }
 .event-description {
 font-size: 16px;
 line-height: 1.5;
 margin-bottom: 20px;
 }
 h3{
	 display: flex;
	 justify-content: space-between;
 }
</style>
<script>
  var tabledata =null;
  let token = localStorage.getItem('token');
  function getData() {
    axios({
     method: 'POST',
     url: 'http://192.168.10.190:8081/shangjiad/queryShangjiadPage',
     data: { // POST 数据要通过 data 属性提供
      pageIndex: 1,
      pageSize: 50,
      danjuzt:"3"
     },
     headers:{
      'token':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3ODExNTUxMDIsInVzZXJpZCI6IjlCNzdFRTM2OUU4OTQzNTQ5QTIzOTRFRDc0QTI1NzIwIiwidXNlcm5hbWUiOiJsaXUifQ.I-irGdwwZpYwTsUDYqeBkRdreymSbYaLizLdzKF-AdY' || 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3ODAyNzk5MzgsInVzZXJpZCI6IkZBNkJGMzM4NjczODQxMjA4Q0RGQUUwRDkxQUY4MDU4IiwidXNlcm5hbWUiOiJ0ZXN0In0.36uhyNyCVWq5GYyyXlcw2krvBpArzSxQFJdeOCz6exM'
     }
    }).then(function(res) {
      if(res.data.code==200){
        tabledata = res.data.data.rows
        const tableBody = document.getElementById('tableBody');
        const DQrenwu = document.getElementById('event-container')
  // 检查数据是否为空
  if (tabledata.length === 0) {
    // 添加一个包含“无数据”的行，并添加一个类来显示“无数据”消息
    tableBody.innerHTML = '<tr><td colspan="3" class="no-data">无数据</td></tr>';
    DQrenwu.innerHTML =  '<div class="event-info"><div class="event-title">暂无数据</div></div>'
    // 添加一个事件监听器来在数据到达时隐藏“无数据”消息
    window.addEventListener('dataArrived', () => {
      tableBody.querySelector('.no-data').remove(); // 移除“无数据”消息
    });
  }else if (tabledata.length === 1) {
    // 添加一个包含“无数据”的行，并添加一个类来显示“无数据”消息
    tableBody.innerHTML = '<tr><td colspan="3" class="no-data">无数据</td></tr>';
    DQrenwu.innerHTML = `<div class="event-header">活动名称</div>
          <div class="event-info">
          <div>时间：${tabledata[0].kaidanrq}</div>
          <div>任务单号：${tabledata[0].rukusjdh}</div>
          <div>托盘号：${tabledata[0].tuopanh}</div>
          <div>货位号：${tabledata[0].huoweimc}</div>
          <div>物资区分：${tabledata[0].wuziqfmc}</div>
          <div>物资专业：${tabledata[0].wuzizymc}</div>
          <div>库房名称：${tabledata[0].kufangmc}</div>
         </div>`
        //  <div>规格型号：${tabledata[0].}</div>
        //   <div>保质期：${tabledata[0].}</div>
        //   <div>生产厂家：${tabledata[0].}</div>
        //   <div>物资单价：${tabledata[0].}</div>
        //   <div>物资金额：${tabledata[0].}</div>
    window.addEventListener('dataArrived', () => {
      tableBody.querySelector('.no-data').remove(); // 移除“无数据”消息
    });
  }else {
    // 将数据添加到表格中
    tableBody.innerHTML = ''; // 清空表格内容
    DQrenwu.innerHTML = `<div class="event-header">活动名称</div>
          <div class="event-info">
          <div>时间：${tabledata[tabledata.length - 1].kaidanrq}</div>
          <div>任务单号：${tabledata[tabledata.length - 1].rukusjdh}</div>
          <div>托盘号：${tabledata[tabledata.length - 1].tuopanh}</div>
          <div>货位号：${tabledata[tabledata.length - 1].huoweimc}</div>
          <div>物资区分：${tabledata[tabledata.length - 1].wuziqfmc}</div>
          <div>物资专业：${tabledata[tabledata.length - 1].wuzizymc}</div>
          <div>库房名称：${tabledata[tabledata.length - 1].kufangmc}</div>
         </div>`
    tabledata.pop()
    tabledata.forEach(row => {
      const newRow = document.createElement('tr');
      newRow.innerHTML = `
        <td><div>${row.id}</div></td>
        <td>${row.huoweimc}</td>
        <td>${row.tuopanh}</td>
      `;
      tableBody.appendChild(newRow); // 添加新行到表格中
    });
  }
      }
    }).catch(function(err) {
      console.log(err);
    })
  }
  // 假设您有一个名为getData的方法来获取数据
  
  getData()
  setInterval(() => {
	  if(localStorage.getItem('token')){
		getData()
	  }
  }, 10000);
  $(document).ready(function(){
    $("#changeuser").click(function(){
      localStorage.removeItem('token')
    });
  });
</script>